#startUpPanel.hideMe

	span.fa.fa-close#closeStartUp.closeStartUp

	#stepWelcomeWrap
		#rightSide
			.headingText
				span Welcome to the Marbles&nbsp;
				strong Hyperledger Fabric&nbsp;
				span demo!

			br
			p.centerText
				span.chooseTxt How should we setup?

				br

				span.hint.guideHints(style="margin-left: -170px;")
					span Already a fabric expert? Default setup here.&nbsp;&nbsp;
					span.fa.fa-arrow-right
				button.guideButtons#instantSetup
					span.fa.fa-rocket &nbsp;&nbsp;&nbsp;
					span Express
				span &nbsp;&nbsp;&nbsp;
				button.guideButtons#startSteps
					span.fa.fa-gears &nbsp;&nbsp;&nbsp;
					span Guided
				span.hint.guideHints
					span.fa.fa-arrow-left
					span &nbsp;&nbsp;Want to learn about fabric or customize the setup?
				br
				br

				#wait4cc.warningWrap
					p Your chaincode is still starting. We need to wait...
					#dateChecked Checking

				#failedSetup.warningWrap
					p
						span.fa.fa-bug &nbsp;&nbsp;&nbsp;
						span Boo, there is an issue with the configuration or network.&nbsp;
						span Enter the&nbsp;
						strong Guided
						spansetup &nbsp;setup to correct it.

			div.centerText
				include ./template/loading.pug

	//----------------- Step Navigation
	#stepsWrap
		.oneStepWrap(stepid="step1").successfulStepIcon.onStep
			.stepIcon.bounce 1
		.oneStepWrap(stepid="step2")
			.stepDivide
			.stepIcon 2
		.oneStepWrap.inactive(stepid="step3")
			.stepDivide
			.stepIcon 3
		.oneStepWrap.inactive(stepid="step4")
			.stepDivide
			.stepIcon 4
		.oneStepWrap.inactive(stepid="step5")
			.stepDivide
			.stepIcon 5
		#stepsTitle There are 5 steps to complete. Click a step to jump to it.


	#detailsWrap

		//----------------- Step 1 Content [Check Settings + Welcome]
		#step1.stepWrap.success
			.stepHeader
				span.fa.fa-gear
				span &nbsp;&nbsp;Check Connection Profile Data
			.stepDescription
				span The first step was to check your connection profile JSON for easy to make mistakes.
				br
				if bag.using_env
					span Your setup is using an environmental variable for the connection profile.
					span If you need to edit this, you will need to restart Marbles.
				else
					span The files that were checked are:&nbsp;
					span.backgroundMe /config/#{bag.config_filename}
					span &nbsp;and&nbsp;
					span.backgroundMe /config/#{bag.cp_filename}
					span &nbsp;.

				br
				br
				span The results are below!

			.failureStep
				p
					span Uh oh, there is something wrong with the config files.
					span The server's console has more information.
				br
				p(style="font-weight: 200;")
					span Checkout the documentation we have on the
					a(href="https://github.com/IBM-Blockchain/marbles/blob/v4.0/docs/config_file.md" target="_blank" style="color:#fff;") config files.
			br
			.successStep Step 1 Complete
			br
			br
			button.nextStep(nextstepid="step2") Next Step

		//----------------- Step 2 Content [Enroll Admin]
		#step2.stepWrap.hidden
			.stepHeader
				span.fa.fa-user
				span &nbsp;&nbsp;Enrolling Admin
			.stepDescription
				span Next up, we attempted to enroll you as your company's admin.
				span This step contacted your Certificate Authority (CA) and fed it the&nbsp;
				span.backgroundMe enrollID
				span &nbsp;and&nbsp;
				span.backgroundMe enrollSecret
				span &nbsp;from your connection profile.
				br

			include ./template/loading.pug

			.failureStep
				p Sorry, we could not enroll the admin against the CA.
				p Edit the settings below to try again.

			.startupWrap
				.settingsExpand
					span.fa.fa-plus-square
					span &nbsp;&nbsp;JSON Settings

				.settingsContent
					.stepInputLegend
						span CA's
						span.backgroundMe api_url
					input(type="text" placeholder="CA ex: 192.168.99.100:8888" name="caUrl" value=bag.creds.ca).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext This is main HTTP url to reach your certificate authority. It should include the protocol and port.
					br
					.stepInputLegend
						span.backgroundMe enrollId
					input(type="text" placeholder="Enroll Id" name="enrollId" value=bag.creds.admin_id).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext This is a valid enroll id for your CA. It should already be registered on the CA.
					br
					.stepInputLegend
						span.backgroundMe enrollSecret
					input(type="text" placeholder="Enroll Secret" name="enrollSecret" value=bag.creds.admin_secret).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext The enroll secret is paired with an enroll ID registered on the CA.

			.successStep Step 2 Complete
			button.nextStep(nextstepid="step3") Next Step
			button.runStep(stepid="step2" nextstepid="step3")#enrollAdmin Try Again

			.showMoreDetails Why is this important?
			.moreDetails
				span If successful, the application will download an enrollment certificate.
				span The certificate will be used to authenticate future marbles transactions.
				span Without it we cannot create transactions.

		//----------------- Step 3 Content [Find Chaincode]
		#step3.stepWrap.hidden
			.stepHeader
				span.fa.fa-file-text
				span &nbsp;&nbsp;Finding Chaincode
			.stepDescription
				span Now we needed to locate the chaincode on your channel.
				span Your connection profile says to check the channel&nbsp;
				span.backgroundMe #{bag.creds.channel}
				span &nbsp;for the chaincode named&nbsp;
				span.backgroundMe #{bag.creds.chaincode_id}
				span &nbsp;.
				br

			include ./template/loading.pug

			.failureStep
				p We could not find the chaincode
				p Edit the settings below to try again
				p(style="font-weight: 200;") OR...
				p(style="font-weight: 200;")
					span If this is your first time using the application then&nbsp;
					a(href="https://github.com/IBM-Blockchain/marbles/tree/v4.0#3-install-and-instantiate-chaincode" target="_blank" style="color:#fff;") install/instantiate
					span &nbsp;marbles chaincode

			.startupWrap
				.settingsExpand
					span.fa.fa-plus-square
					span &nbsp;&nbsp;JSON Settings

				.settingsContent
					.stepInputLegend
						span Orderer's
						span.backgroundMe discovery_url
					input(type="text" placeholder="Orderer ex: 192.168.99.100:5151" name="ordererUrl" value=bag.creds.orderer).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext This is the main gRPC url to reach your orderer. It should include the protocol and port. You will be sending marbles transactions here for ordering.
					br
					.stepInputLegend
						span Peer's
						span.backgroundMe discovery_url
					input(type="text" placeholder="Peer ex: 192.168.99.100:7051" name="peerUrl" value=bag.creds.peer).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext This is the main gRPC url to reach your peer.  It should include the protocol and port. You will be sending marble transactions here for endorsement.
					br
					.stepInputLegend
						span.backgroundMe channel
					input(type="text" placeholder="Channel Name" name="channelId" value=bag.creds.channel).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext This is the name of a channel you created on the blockchain network.
					br
					.stepInputLegend
						span.backgroundMe chaincode_id
					input(type="text" placeholder="Chaincode ID" name="chaincodeId" value=bag.creds.chaincode_id).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext This is the name of your instantiated chaincode. ex: marbles.
					br
					.stepInputLegend
						span.backgroundMe chaincode_version
					input(type="text" placeholder="Chaincode ID" name="chaincodeVersion" value=bag.creds.chaincode_version).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext This is the version of your instantiated chaincode. ex: v4.

			.successStep Step 3 Complete
			br
			button.nextStep(nextstepid="step4") Next Step
			button.runStep(stepid="step3" nextstepid="step4")#findCcButton Try Again

			.showMoreDetails Why is this important?
			.moreDetails
				span Each channel on the network has its own ledger to store transactions.
				span When our chaincode is running on a channel we will be able to create and store these transactions.
				span There might be other types of activity on the channel, but we won't be concern with them.
				br
				br
				span The chaincode itself is code written in GoLang.
				span It defines the assets (marbles) and the rules around marble transfers.
				span Our chaincode transactions will create and modify marbles, marble owners, and marble companies.
				span We cannot use this application until the chaincode is instantiated on a channel.

		//----------------- Step 4 Content [Register Marble Owners]
		#step4.stepWrap.hidden
			.stepHeader
				span.fa.fa-group
				span &nbsp;&nbsp;Create Assets
			.stepDescription
				span Almost there!
				span As a marbles trading company you may bring new marble owners onboard.
				span These marble owners represent your user base.
				br
				br
				span This step will create the marble owners and 3 marbles per owner.

			include ./template/loading.pug

			.startupWrap
				#registerOwnersInputPanel.settingsContent
					.stepInputLegend
						span Company
					input(type="text" value=bag.marble_company disabled="disabled").longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext Edit the config file and restart the application to change your company name.
					br
					.stepInputLegend
						span Marble Owners
					input(type="text" placeholder="bob, bill, amy" name="marbleOwners" value=bag.creds.marble_owners).longer
					span.fa.fa-question-circle.settingstooltip
						span.tooltiptext Enter the names of the marble owners you want created. Separate them by commas.

			.successStep Step 4 Complete
			button.nextStep(nextstepid="step5" style="display: inline-block") Skip Step
			button.runStep(stepid="step4" nextstepid="step5")#registerOwners Create

		//----------------- Step 5 Content [Finished]
		#step5.stepWrap.hidden.success
			span.fa.fa-smile-o.fa-3x
			.stepDescription(style="text-align:center")
				span Your marbles application is ready to use!
				br
				br

			button(type="button").closeStartUp Enter
